<template>
  <div id="app">
    <router-view />
    <!-- v-if="$route.meta.requiresAuth" -->
    <mt-tabbar id="tabbar"  fixed v-model="selected"  @click.native="$router.push(selected)">
      <mt-tab-item id="/home" >
        <img slot="icon" src="../static/assets/logo.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="/vip">
        <img slot="icon" src="../static/assets/logo.png">
        会员
      </mt-tab-item>
      <mt-tab-item id="/shopping" class="shop-num">
          <span id="all-num">5</span>
          <img slot="icon" src="../static/assets/logo.png">
          购物车
      </mt-tab-item>
      <mt-tab-item id="/search">
        <img slot="icon" src="../static/assets/logo.png">
        搜索
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        
        selected:'',
      }
    },
    mounted(){
      document.getElementById('all-num').style = `position: absolute;top: 5px;
                                                  left: 53%;
                                                  width: 15px;
                                                  height: 15px;
                                                  background: red;
                                                  line-height: 16px;
                                                  color: white;
                                                  border-radius: 50%;
                                                  `

    }
  }
</script>

<style >
*{
  margin: 0px;
  padding: 0px;
}
  body {
    margin: 0;
    background-color: #f9f9f9;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
  }
  #tabbar{
    height: 8vh;
  }
  .shop-num {
    position: relative;
  }
  .shop-num>>>.mint-tab-item-label>>>.all-num{
    position: absolute;
    top: 5px;
    left: 53%;
    width: 15px;
    height: 15px;
    background: red;
    line-height: 16px;
    color: white;
    border-radius: 50%;
  }
</style>
